import React from "react";

class App extends React.Component {
  state = {
    num: 1,
    first: "张",
    last: "三",
  };

  /**
   *  PS:
   *    1. 必须返回一个对象或者null
   *    2. 如果返回的对象会语与件当前的 state 做合并，如果返回null则不做事情
   *    3. 派生State不能修改，修改了没用
   *    4. 该函数中无法获取组件实例（this）
   *    5. 有两个参数
   *      1. props 当前组件的 props 数据
   *      2. state 当前组件的 state 数据
   */
  static getDerivedStateFromProps(props, state) {
    // console.log("=== getDerivedStateFromProps props", props);
    // console.log("=== getDerivedStateFromProps state", state);
    return {
      dobule: 2,
      full: state.first + " " + state.last,
    };
  }

  addNum = () => {
    this.setState((state) => ({ num: state.num + 1 }));
  };

  addDobule = () => {
    /**
     * q: 为何修改之后，不能引起 dobule 的更新
     * a: 因为 dobule 是一个 DerivedState（派生State）
     *    它的值，是由 getDerivedStateFromProps 的返回值决定的。
     */
    this.setState((state) => ({ dobule: state.dobule + 1 }));
  };

  render(): React.ReactNode {
    console.log("this.state", this.state);

    return (
      <div>
        <h1>App</h1>
        <p>Full: {this.state.full}</p>
        <button onClick={this.addNum}>num: {this.state.num}</button>
        <button onClick={this.addDobule}>dobule: {this.state.dobule}</button>
        <button onClick={() => this.setState(() => ({ first: "李" }))}>
          修改 First
        </button>
      </div>
    );
  }
}

/**
 * getDerivedStateFromProps 不常用，我们可以在 render 函数实现派生的数据用于渲染使用
 */
class Demo extends React.Component {
  state = {
    first: "张",
    last: "三",
  };

  render() {
    // 计算 full
    const full = this.state.first + " " + this.state.last;

    return (
      <div>
        <h1>App</h1>
        <p>Full: {full}</p>
        <button onClick={() => this.setState(() => ({ first: "李" }))}>
          修改 First
        </button>
      </div>
    );
  }
}

export default Demo;
